import React from "react";
import { MainLayout } from "../../layouts/mainLayout";
// import { useSelector } from "../../hook";
import { Row, Col } from "antd";
import { useSelector } from "../../hook";
import { useDispatch } from "react-redux";
import { ProductList } from "../../components";
import { PaymentCard } from "../../components/paymentCard";
import {
  checkout,
  clearCart,
  deleteCartItem,

} from "../../redux/ShopCart/slice";
import { useHistory } from "react-router-dom";
export const ShopCartPage: React.FC = () => {
  const jwt = useSelector((s) => s.user.token) as string;
  const scloading = useSelector((s) => s.ShopCart.loading);
  const shopCartList = useSelector((s) => s.ShopCart.ShopCartList);
  const dispatch = useDispatch();
  const history = useHistory();
  return (
    <MainLayout>
      <Row>
        <Col span={16}>
          <ProductList
  
          deleteItem={
            (id)=>{
              dispatch(
               deleteCartItem({jwt,itemId:id}) 
              )
            }
          }
            data={shopCartList.map((v) => v.touristRoute)}
          />
        </Col>
        <Col span={8}>
          <PaymentCard
            onCheckout={() => {
              if (shopCartList.length <= 0) return alert("请至少选择一下");

              dispatch(checkout(jwt));
              history.push("/order");
            }}
            loading={scloading}
            originalPrice={shopCartList
              .map((s) => s.originalPrice)
              .reduce((a, b) => a + b, 0)}
            price={shopCartList
              .map(
                (s) =>
                  s.originalPrice * (s.discountPresent ? s.discountPresent : 1)
              )
              .reduce((a, b) => a + b, 0)}
            onShoppingCartClear={() => {
              dispatch(
                clearCart({
                  jwt,
                  itemIds: shopCartList.map((s) => s.id),
                })
              );
            }}
          ></PaymentCard>
        </Col>
      </Row>
    </MainLayout>
  );
};
